<template>
  <div class="top-nav">
    <div
      v-for="(item, index) in navItems"
      :key="item.path"
      class="nav-item"
      :class="[item.class, { active: activePath === item.path, 'with-border': index < navItems.length - 1 }]"
      @click="navigate(item.path)"
    >
      <el-icon><component :is="item.icon" /></el-icon>
      <span>{{ item.label }}</span>
    </div>

    <!-- 红线放在导航外面，top:100% 紧贴在 .top-nav 下方 -->
    <div class="bottom-line"></div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { Upload, Download, Files, Back, CircleCheck, List } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'

const router = useRouter()
const route = useRoute()
const activePath = ref(route.path)

const navItems = [
  { path: '/delieve', label: '数据发放与接收', icon: Download, class: 'report' },
  // { path: '/receive', label: '数据接收', icon: Upload, class: 'receive' },
  { path: '/receive', label: '数据备份与还原', icon: Files, class: 'backup' },
    { path: '/exportConfig', label: '导出配置管理', icon: List, class: 'backup' },
  { path: '/dashboard', label: '返回上级', icon: Back, class: 'return' },
]

const navigate = (path) => {
  activePath.value = path
  router.push(path)
}

watch(
  () => route.path,
  (newPath) => {
    activePath.value = newPath
  }
)
</script>

<style scoped>
.top-nav {
  position: relative;
  display: flex;
  width: 100%;
  height: 100px;        /* 增加导航高度 */
  font-size: 20px;      /* 增大字体 */
  font-weight: 600;
  color: #fff;
  text-align: center;
  cursor: pointer;
  /* 去掉任何底部内阴影，确保红线显示清晰 */
  box-sizing: border-box;
  z-index: 10;
}

/* 公共栏目样式 */
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.18s ease; /* 只用透明度，避免位移导致覆盖红线 */
  position: relative;
  z-index: 20; /* 高于红线 */
  gap: 8px;    /* 增加图标和文字的间距 */
}

/* 增大图标尺寸 */
.nav-item .el-icon {
  font-size: 28px;
}

/* 取消 translateY(-2px) 的 hover 位移，避免把红线遮住 */
.nav-item:hover {
  opacity: 0.95;
}

/* 分隔线 */
.nav-item.with-border::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0%;
  height: 100%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.6);
}

/* 背景色 */
.nav-item:not(.return) { background-color: #0052cc; }
.nav-item.return      { background-color: #ffb300; color: #fff; }

/* 激活白底蓝字 */
.nav-item.active:not(.return) {
  background-color: #fff;
  color: #0052cc;
}

/* 红线：用 top:100% 放在 .top-nav 正下方，紧贴底部 */
.bottom-line {
  position: absolute;
  top: 100%;      
  left: 0;
  width: 100%;
  height: 8px;   
  background-color: #d32f2f;
  /* border-radius: 2px; */
  z-index: 5;     
}
</style>
